<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 通用工具栏组件 -->
      <PageTools>
        <template #default>员工总人数: {{ total }}人</template>
        <template #right>
          <!-- <el-button :disabled="!$store.state.user.userInfo.roles.points.includes('imoprtuser')" type="success" @click="$router.push('/import?name=user')">excel导入</el-button>
          <el-button :disabled="!$store.state.user.userInfo.roles.points.includes('exportuser')" type="warning" @click="handleDownload">excel导出</el-button>
          <el-button :disabled="!$store.state.user.userInfo.roles.points.includes('adduser')" type="primary" @click="showDialog = true">新增员工</el-button> -->
          <el-button v-if="checkPermission('imoprtuser')" type="success" @click="$router.push('/import?name=user')">excel导入</el-button>
          <el-button v-if="checkPermission('exportuser')" type="warning" @click="handleDownload">excel导出</el-button>
          <el-button v-if="checkPermission('adduser')" type="primary" @click="showDialog = true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-card style="margin-top:30px">
        <el-table :data="tableData" border stripe>
          <el-table-column label="序号" type="index" width="60" :index="indexMethod" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template #default="{row}">
              <img
                v-imgerror="defaultImg"
                :src="row.staffPhoto || defaultImg"
                style="width: 80px;height: 80px;border-radius: 50%"
                @click="showCode(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="formatter">
            <!-- 使用作用域插槽处理聘用形式列 -->
            <!-- <template #default="{row}">
              {{ row.formOfEmployment === 1 ? '正式员工' : '临时' }}
            </template> -->
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职日期">
            <template #default="{row}">
              {{ row.timeOfEntry.substr(0, 10) }}
              <!-- {{ formatTime(row.timeOfEntry) }} -->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right">
            <template #default="{row}">
              <!-- {{ row }} -->
              <!-- 路由跳转传参两种方式  ?传参 query查询参数   /传参 params传参
                 query传参直接在跳转的路由地址中 /list?id=值  this.$route.query.id
                 params传参  /list/100  需要在路由地址的path中做一个占位 { path:'/list/:id' } this.$route.params.id
               -->
              <el-button type="text" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text">转正</el-button>
              <el-button type="text">调岗</el-button>
              <el-button type="text">离职</el-button>
              <el-button type="text" @click="showAssign(row.id)">角色</el-button>
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          style="margin-top: 30px"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 新增员工的对话框 -->
        <AddEmployee :show-dialog.sync="showDialog" @reload="getEmployeesList" />
        <!-- 二维码展示对话框 -->
        <el-dialog
          title="扫码预览"
          :visible.sync="showCodeDialog"
          width="15%"
        >
          <!-- 二维码盛放容器 -->
          <canvas ref="codeRef" />
        </el-dialog>
        <!-- 分配角色的对话框 -->
        <AssignRole :user-id="userId" :show-assign-dialog.sync="showAssignDialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { reqGetEmployeesList, reqDelEmployee } from '@/api/employees'
import Enum from '@/constant/employees'
import AddEmployee from './components/add-employee.vue'
import moment from 'moment'
// 单独导入图片模块
import defaultImg from '@/assets/common/head.jpg'
import qrcode from 'qrcode'
import AssignRole from './components/assign-role.vue'
import mix from '@/mixins'
export default {
  name: 'Employees',
  components: { AddEmployee, AssignRole },
  mixins: [mix],
  data() {
    return {
      defaultImg,
      tableData: [], // 员工列表
      total: 0, // 总数
      page: 1,
      size: 5,
      showDialog: false, // 控制对话框显示的布尔值
      showCodeDialog: false, // 控制二维码展示的对话框
      showAssignDialog: false, // 分配角色对话框的布尔值
      userId: '' // 点击分配角色的用户id
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    // 获取员工列表
    async getEmployeesList() {
      const { data: { rows, total }} = await reqGetEmployeesList(this.page, this.size)
      this.tableData = rows
      this.total = total
    },
    // size发生变化的处理函数
    handleSizeChange(val) {
      this.size = val
      this.getEmployeesList()
    },
    // page发生变化的处理函数
    handleCurrentChange(val) {
      this.page = val
      this.getEmployeesList()
    },
    // 自定义索引列
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    // 删除员工
    async del(id) {
      // console.log(id)
      // 1. 确认消息框
      const res = await this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res !== 'confirm') return this.$message.info('已取消')
      // 2. 发送请求
      await reqDelEmployee(id)
      // page--
      if (this.tableData.length === 1 && this.page > 1) {
        this.page--
      }
      // 3. 重新渲染
      this.getEmployeesList()
    },
    // 格式化表格聘用形式列的内容
    formatter(row, column, cellValue, index) {
      // row 行的信息
      // column列的信息
      // cellValue是单元的值
      // index是索引
      // console.log(cellValue)
      const o = Enum.hireType.find(item => item.id === +cellValue)
      // console.log(o)
      return o ? o.value : '未知'
    },
    // 格式化日期的处理函数 dayjs(移动端) moment(PC) 一样
    formatTime(val) {
      return moment(val).format('YYYY-MM-DD')
    },
    // 导出excel
    async handleDownload() {
      // 1. 先获取到所有的员工列表(正常应该是有一个获取所有员工列表的接口)
      const { data: { rows }} = await reqGetEmployeesList(1, this.total)
      console.log(rows)
      const rules = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
      const result = this.translate2Array(rows, rules)
      console.log(result) // [[]] 所有员工信息被收集到
      // 在这导入的写法就是为了提升项目性能, 只有点击了导出按钮后再加载对应的资源文件
      import('@/vendor/Export2Excel').then(obj => {
        obj.export_json_to_excel({
          // 表格的标题列 []
          header: Object.keys(rules),
          multiHeader,
          merges: ['A1:A2', 'B1:F1', 'G1:G2'],
          // 表格的数据 [[]] 数组是有索引的
          data: result,
          // 文件名
          filename: '学员成绩表',
          // 自适应宽度
          autoWidth: true,
          // 文件的后缀名
          bookType: 'xlsx'
        })
      })
    },
    // map some every find findIndex reduce flat filter forEach
    translate2Array(rows, rules) {
      console.log(Object.keys(rules))
      // 遍历所有员工
      return rows.map(item => { // item是每一个员工对象
        // console.log(item)
        // map收集到的是每一个员工需要的值的数组
        return Object.keys(rules).map(str => {
          // console.log(str) // 表头中文键
          // 根据中文键找到对应的需要的英文的键, 然后再拿到对应员工对象中需要的值
          const englishKey = rules[str]
          // console.log(englishKey)
          // console.log(item[englishKey])
          // 聘用形式不要直接返回对应的 1 2 基于常量数据 返回正式 非正式
          if (englishKey === 'formOfEmployment') {
            const o = Enum.hireType.find(obj => obj.id === +item[englishKey])
            return o ? o.value : '未知'
            // 处理日期列
          } else if (englishKey === 'timeOfEntry' || englishKey === 'correctionTime') {
            return moment(item[englishKey]).format('YYYY-MM-DD')
          } else {
            return item[englishKey]
          }
        })
      })
    },
    // 展示对话框中的二维码
    showCode(info) {
      // console.log(info)
      // 如果没有头像信息 不展示
      if (!info) return this.$message.warning('默认头像不展示')
      this.showCodeDialog = true
      // qrcode.toCanvas(展示二维码canvas dom容器, 展示的信息)
      this.$nextTick(() => {
        qrcode.toCanvas(this.$refs.codeRef, info)
      })
    },
    // 展示分配角色的对话框并存储点击的用户id
    showAssign(id) {
      // console.log(id)
      this.showAssignDialog = true
      this.userId = id
    }
    // forEach版本的
    // translate2Array(rows, headersArr, rules) {
    //   const Arr = []
    //   // 遍历所有员工
    //   rows.forEach(item => { // item是每一个员工对象
    //     // console.log(item)
    //     const arr = [] // 这个数组来盛放每个员工的信息
    //     // 每一个员工的信息(值)要被收集到一个数组中
    //     headersArr.forEach(str => { // 遍历中文标题数组
    //       const englishKey = rules[str] // 根据对照规则拿到英文的键
    //       arr.push(item[englishKey])// 从个人item对象中 对照英文获取对应的值
    //     })
    //     Arr.push(arr)
    //   })
    //   return Arr
    // }
  }
}
</script>

<style>

</style>
